<!-- 银行卡 -->
<template>
  <view>
    <view style="display: flex; justify-content: flex-end; margin: 10px">
      <u-icon name="plus" size="25" @click="newly()"></u-icon>新增
    </view>
    <u-empty
      mode="data"
      text="暂无数据"
      v-if="dataList.length == 0"
      marginTop="100%"
      :icon="getResource('img/phone/mini/no_data.png')"
    />
    <!-- @click="
          details;
          on_of = true;
          form = { ...item };
        " -->
    <view v-else>
      <view
        v-for="(item, index) in dataList"
        :key="index"
        @click="details(item.id)"
        style="margin: 0 20px"
      >
        <view style="position: relative; color: white">
          <I-Images
            :src="item.image"
            lazyLoad
            :mode="aspectFill"
            showLoading
            showError
            width="100%"
            fade
          >
          </I-Images>
          <view
            style="
              position: absolute;
              left: 25px;
              top: 20px;
              width: 100%;
              font-weight: bold;
            "
          >
            <view class="card-logo">
              <I-Images
                lazyLoad
                :mode="aspectFill"
                showLoading
                showError
                width="40px"
                height="30px"
                fade
              >
              </I-Images
            ></view>
            <view>
              {{ item.bank_name }}
            </view>
            <view style="margin: 10px 0">
              {{ item.bank_kai_name }}
            </view>
            <view class="card-number">{{
              formatBankNumber(item.bank_no)
            }}</view>
          </view>
        </view>
      </view>
      <!-- <view
        v-for="(item, index) in dataList"
        :key="index"
        @click="details(item.id)"
        class="bank-card-new"
      >
        <I-Images
          :src="item.image"
          lazyLoad
          :mode="aspectFill"
          showLoading
          showError
          width="120px"
          height="89px"
          fade
        >
        </I-Images>
        <view class="card-logo"></view>
				<view class="card-content">
					<view class="bank-info">
						<text class="bank-name">{{ item.bank_name }}</text>
						<text class="bank-branch">{{ item.bank_kai_name }}</text>
					</view>
					<view class="card-number">{{ formatBankNumber(item.bank_no) }}</view>
				</view>
				<view class="card-decoration">
					<view class="card-chip"></view>
					<view class="card-wave"></view>
				</view>
      </view> -->
    </view>

    <u-modal
      :show="on_of"
      :title="form.id ? '修改' : '新增'"
      @confirm="submitForm"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <template #confirmButton>
        <view style="display: flex">
          <u-button
            type="primary"
            class="Cancel"
            @click="handleCancel"
            :customStyle="{ margin: '20rpx' }"
            shape="circle"
            color="rgb(244,244, 244)"
          >
            <text style="color: #606266">取消</text>
          </u-button>
          <u-button
            type="primary"
            @click="submitForm"
            :customStyle="{ margin: '20rpx' }"
            shape="circle"
          >
            确认
          </u-button>
        </view>
      </template>

      <u-form :model="form" :rules="rules" ref="dataForm">
        <!-- 开户行选择 -->
        <u-form-item
          label="开户行"
          prop="bank_name"
          required
          labelWidth="100px"
        >
          <u-input
            v-model="form.bank_name"
            placeholder="请输入开户行"
            border="none"
            inputAlign="right"
          />
        </u-form-item>

        <!-- 开户支行输入 -->
        <u-form-item
          label="开户支行"
          prop="bank_kai_name"
          required
          labelWidth="100px"
        >
          <u-input
            v-model="form.bank_kai_name"
            placeholder="请输入开户支行"
            border="none"
            inputAlign="right"
          />
        </u-form-item>

        <!-- 银行卡号输入 -->
        <u-form-item
          label="银行卡号"
          prop="bank_no"
          required
          labelWidth="100px"
        >
          <u-input
            v-model="form.bank_no"
            placeholder="请输入银行卡号"
            type="number"
            maxlength="19"
            border="none"
            inputAlign="right"
          />
        </u-form-item>
      </u-form>
    </u-modal>
  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import { getSave, getSaveIndex, getSaveRead } from "../../api/userInfo";
import { showToast, showLoading, hideLoading } from "@/utils/toast";
import { getResource } from "@/utils/Resource";

// 表单数据
const form = ref({
  bank_name: "", // 开户行
  bank_kai_name: "", // 支行
  bank_no: "", // 银行卡号
  id: "",
});
const dataList = ref([]);
const on_of = ref(false);
const dataForm = ref(null);

// 表单验证规则
const rules = ref({
  bank_name: [
    {
      required: true,
      message: "请选择开户行",
      trigger: "blur",
    },
  ],
  bank_kai_name: [
    {
      required: true,
      message: "请输入开户支行",
      trigger: "blur",
    },
  ],
  bank_no: [
    {
      required: true,
      message: "请输入银行卡号",
      trigger: "blur",
    },
    {
      pattern: /^\d{16,19}$/,
      message: "银行卡号格式错误",
      trigger: "blur",
    },
  ],
});
const newly = () => {
  form.value.bank_name = "";
  form.value.bank_kai_name = "";
  form.value.bank_no = "";
  form.value.id = "";
  on_of.value = true;
};
// 取消按钮处理函数：关闭弹窗并清除表单
const handleCancel = () => {
  on_of.value = false;
  // 弹窗关闭后重置，避免影响下次打开
  nextTick(() => {
    if (dataForm.value) {
      dataForm.value.resetFields();
    }
  });
};

// 提交表单
const submitForm = () => {
  dataForm.value
    .validate()
    .then(async (valid) => {
      if (valid) {
        try {
          const res = await getSave(form.value);
          if (res.code == 10000) {
            showToast("银行卡认证成功");
            on_of.value = false;
            init(); // 重新加载数据
            dataForm.value.clearValidate();
          }
        } catch (error) {}
      } else {
        showToast("请检查表单是否填写");
      }
    })
    .catch(() => {
      showToast("请检查表单是否填写");
    });
};

const details = async (e) => {
  try {
    // 1. 先加载数据，不立即显示弹窗
    const res = await getSaveRead(e);
    form.value = res.data;
    on_of.value = true;
  } catch (error) {}
};
// 初始化数据
const init = async () => {
  try {
    const res = await getSaveIndex();
    // 为每一项生成不同的随机图片
    dataList.value = res.data.map((item) => {
      const randomIndex = Math.floor(Math.random() * 4); // 0, 1, 2, 或 3
      const randomImagePath = getResource(
        `img/phone/mini/bank/index_${randomIndex}.png`
      );
      return {
        ...item,
        image: randomImagePath, // 每条数据分配独立的随机图片
      };
    });
    console.log("随机分配图片完成:", dataList.value);
  } catch (error) {}
};

onMounted(() => {
  init();
});

const formatBankNumber = (num) => {
  if (!num) return "•••• •••• •••• ••••";
  return num.replace(/(\d{4})(?=\d)/g, "$1 ");
};
</script>

<style>
.bank-card-new {
  position: relative;
  width: 70%;
  height: 100px;
  margin: 15px auto;
  padding: 30px;
  border-radius: 16px;
  background: linear-gradient(145deg, #2c3e50, #4a6491);
  color: white;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.bank-card-new:active {
  transform: translateY(2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-logo {
  position: absolute;
  top: 0px;
  right: 50px;
  width: 40px;
  /* height: 40px; */
  /* line-height: 40px; */
  padding: 5px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.bank-info {
  margin-bottom: 30px;
}

.bank-name {
  display: block;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 5px;
}

.bank-branch {
  font-size: 14px;
  opacity: 0.8;
}

.card-number {
  font-size: 18px;
  letter-spacing: 2px;
  font-family: "Courier New", monospace;
}

.card-decoration {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
}

/* .card-chip {
		width: 30px;
		height: 24px;
		background: linear-gradient(135deg, #ffd700, #ffb700);
		border-radius: 4px;
		margin-right: 10px;
	} */

.card-wave {
  width: 40px;
  height: 30px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 40 30" xmlns="http://www.w3.org/2000/svg"><path d="M0,15 Q10,5 20,15 T40,15" stroke="white" stroke-width="2" fill="none"/></svg>');
  opacity: 0.7;
}

/* 添加半透明装饰条纹 */
.bank-card-new::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
}

/* 银行卡号格式化方法 */
</style>
